<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>参考链接：https://codepen.io/Chokcoco/pen/ExEYwLE</title>
</head>
<style>
    @property --p {
        syntax: "<integer>";
        initial-value: 0;
        inherits: true;
    }

    body {
        display: flex;
        align-items: center;
        justify-content: space-around;
        background: #222;
    }

    .loader {
        --p: 0;
        display: grid;
        place-content: center;
        transform: scale(0.5);
        clip-path: circle(49%);
        animation: p 10s steps(100) infinite;
        color: HSL(calc(var(--p)*2), 100%, 65%);
    }

    .loader:before,
    .loader:after {
        grid-row: 1;
        grid-column: 1;
    }

    .loader:before {
        border: solid 2em transparent;
        padding: 6em;
        border-radius: 50%;
        box-shadow: inset 0 0 0 0.5em currentcolor;
        --slice: calc(360deg/var(--n));
        --s-gap: calc(var(--f)*var(--slice));
        --solid: calc((1 - var(--f))*var(--slice));
        background: repeating-conic-gradient(from calc(.5*var(--s-gap)), currentcolor 0% var(--solid), transparent 0% var(--slice)) border-box;
        filter: blur(0.5px);
        --mask:
            conic-gradient(red 0% calc(var(--p)*1%), rgba(255, 0, 0, 0.3) 0%),
            linear-gradient(red, red) border-box,
            radial-gradient(red 0% 5.5em,
                transparent calc(5.5em + 1px) calc(5.75em - 1px),
                red 5.75em calc(6em + 1px),
                transparent calc(6em + 2px));
        -webkit-mask: var(--mask);
        mask: var(--mask);
        -webkit-mask-composite: source-in, source-out;
        mask-composite: source-in, source-out;
        content: "";
    }

    .loader:after {
        place-self: center;
        counter-reset: p var(--p);
        font: 3.75em consolas, monaco, ubuntu mono, monospace;
        content: counter(p) "%";
    }

    @keyframes p {

        90%,
        100% {
            --p: 100;
        }
    }
</style>

<body>
    <div class='loader' style='--n: 1; --f: 0'></div>
    <div class='loader' style='--n: 16; --f: .2'></div>
    <div class='loader' style='--n: 36; --f: .5'></div>
</body>

</html>